<template>
	<view class="container">
		<up-form labelPosition="left" :model="form" :rules="rules" ref="uFormRef">
			<up-form-item label="姓名" label-width="150rpx" prop="userInfo.reportName" :borderBottom="true">
				<u-input v-model="form.userInfo.reportName" placeholder="填写姓名" border="none"></u-input>
			</up-form-item>
			<up-form-item label="身份证号" label-width="150rpx" prop="userInfo.carid" :borderBottom="true">
				<u-input v-model="form.userInfo.carid" placeholder="填写身份证号" border="none"></u-input>
			</up-form-item>
			<up-form-item label="手机号" label-width="150rpx" prop="userInfo.phone" :borderBottom="true">
				<u-input v-model="form.userInfo.phone" placeholder="填写手机号" border="none"></u-input>
			</up-form-item>
			<up-form-item label="年龄" label-width="150rpx" prop="userInfo.age" :borderBottom="true">
				<u-input v-model="form.userInfo.age" placeholder="填写年龄" border="none"></u-input>
			</up-form-item>
			<up-form-item label="性别" label-width="150rpx" prop="userInfo.sex" :borderBottom="true">
				<picker @change="sexPickerChange" :value="index" :range="sexArray" range-key="text">
					<u-input v-model="form.userInfo.sex" disabled placeholder="填写性别" border="none"></u-input>
				</picker>
			</up-form-item>
		</up-form>

		<view class="confirm" @click="submit">提交</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app";

	const form = reactive({
		userInfo: {
			reportName: ''
		}
	})
	
	const sexArray = reactive([
		{text: "男"},
		{text: "女"}
	])

	// 校验规则  
	const rules = {
		'userInfo.reportName': [{
			required: true,
			message: '请输入姓名',
			trigger: ['blur', 'change'],
		}, ],
		'userInfo.carid': [{
				required: true,
				message: '请输入身份证号',
				trigger: ['blur', 'change'],
			},
			{
				pattern: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/,
				// 正则检验前先将值转为字符串
				transform(value) {
					return String(value);
				},
				message: '请输入正确身份证号！'
			},
		],
		'userInfo.phone': [{
				required: true,
				message: '请输入手机号',
				trigger: ['blur', 'change'],
			},
			{
				pattern: /^1[3-9]\d{9}$/,
				// 正则检验前先将值转为字符串
				transform(value) {
					return String(value);
				},
				message: '请输入正确手机号！'
			},
		],
		'userInfo.age': [{
			required: true,
			message: '请输入年龄',
			trigger: ['blur', 'change'],
		}, ],
		'userInfo.sex': [{
			required: true,
			message: '请选择性别',
			trigger: ['blur', 'change'],
		}, ],
	};

	const uFormRef = ref()
	const options = ref()
	onLoad((params) => {
		// options.value = params;

		// console.log("options.valu", options.value)
		// if (params.type == 0) {

		// 	console.log("JSON.parse(params?.data)",JSON.parse(params?.data))
		// 	form.userInfo = params.data? JSON.parse(params?.data):{};
		// }


		// console.log("form.userInfo",form.userInfo)
	})

	function submit() {
		let patientList = uni.getStorageSync('PatientList')

		uFormRef.value.validate().then(valid => {
			if (valid) {
				// 如果有patientList数据，拼接数组
				if (Array.isArray(patientList) && patientList.length != 0) {
					let list = [];
					list.push(form.userInfo);
					uni.setStorageSync('PatientList', [...patientList, ...list])
				} else {
					uni.setStorageSync('PatientList', [form.userInfo])
				}

				uni.showToast({
					title: '添加成功'
				})
				form.userInfo = {};

				uni.navigateBack({
					delta: 1
				})

			}
		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('校验失败')
		});
	}
	
	function sexPickerChange(e) {
		console.log("e", e)
		form.userInfo.sex = sexArray[e.detail.value].text;
	}
</script>

<style lang="scss">
	@import "../../../uni.scss";
	page {
		background-color: #F5F6FA;
	}

	.container {
		margin: 30rpx;
		background-color: #FFF;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.confirm {
		position: fixed;
		bottom: 50rpx;
		left: 32rpx;
		right: 32rpx;
		border-radius: 45rpx;
		background: $color-main;
		font-family: Source Han Sans;
		font-size: 32rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: normal;
		color: #FFFFFF;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
	}
</style>